<template>
	<view>
		<view class="topNameBox">
			<image class="img_logo" mode="widthFix"
				:src="indexSet.img_logo||'https://jingshuiqi.28vu.com/static/admin/img/none.png'">
			</image>
			<view class="name">
				<view class="n1">{{ uesrData.username}}</view>
				<view class="n2">{{ uesrData.mobile}}
					<image @click="bangd()" src="/static/bj.png" class="edit" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="topMoneyBox2">
			<view class="tmbleft2">
				<navigator url="money/yue_jife">
					<view class="tit">净水器编码</view>
					<view class="num">{{ uesrData.purifier_code ||'暂无设备' }}</view>
				</navigator>
			</view>
			<view class="tmbleft2">
				<navigator url="money/yue_yue">
					<view class="tit">激活时间</view>
					<view class="num">{{ uesrData.start_time ||'--' }}</view>
				</navigator>
			</view>
			<view class="tmbleft2">
				<navigator url="money/yue_yue">
					<view class="tit">质保时间</view>
					<view class="num">{{ uesrData.expiration_number}} 天</view>
				</navigator>
			</view>
			<view class="tmbBtn" @click="delect(uesrData.money)">解绑</view>
		</view>
		<view class="linesBox">
			<!-- 	<view class="lines lineborder">
				<image class="icon" mode="widthFix" src="/static/nav2.png"></image>
				<image class="more" mode="widthFix" src="/static/more.png"></image>
				<view>净水器编码</view>
				<view class="rtxt">{{uesrData.purifier_code}}</view>

			</view>
			<view class="lines lineborder">
				<image class="icon" mode="widthFix" src="/static/nav2.png"></image>
				<image class="more" mode="widthFix" src="/static/more.png"></image>
				<view>净水器激活时间</view>
			</view> -->

			<view class="lines lineborder">
				<image class="icon" mode="widthFix" src="/static/wx.png"></image>
				<!-- <image class="more" mode="widthFix" src="/static/more.png"></image> -->
				<view>客服微信</view>
				<view class="rtxt" @click="copy(indexSet.wx)">{{indexSet.wx}}</view>
			</view>
			<view class="lines lineborder">
				<image class="icon" mode="widthFix" src="/static/dhua.png"></image>
				<!-- <image class="more" mode="widthFix" src="/static/more.png"></image> -->
				<view>客服电话</view>
				<view class="rtxt" @click="callphone(indexSet.phone)">{{indexSet.phone}}</view>
			</view>
			<navigator url="/pages/mine/about">
				<view class="lines">
					<image class="icon" mode="widthFix" src="/static/gyu.png"></image>
					<image class="more" mode="widthFix" src="/static/more.png"></image>
					<view>关于我们</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				indexSet: {},
				uesrData: {}
			};
		},
		onLoad() {
			// this.API_uesr();
		},
		onShow() {
			this.API_uesr();
			this.API_Logo();
		},
		onShareTimeline() {
			return {
				title: '西岭小雪净水',
				query: {
					key: ''
				},
				imageUrl: ''
			}
		},
		onShareAppMessage() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods: {
			delect() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否解绑该设备？',
					success: function(res) {
						if (res.confirm) {
							that.API_unbindCode();
						} else if (res.cancel) {}
					}
				});
			},
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			bangd() {
				uni.showModal({
					title: '提示',
					content: '是否更换绑定手机号？',
					success: function(res) {
						if (res.confirm) {
							uni.redirectTo({
								url: '/pages/login/phone'
							})
						} else if (res.cancel) {}
					}
				});
			},
			callphone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			API_unbindCode() {
				this.ran.request('index/Index/unbindCode', {}).then(res => {
					if (res.code == 0) {
						uni.showToast({ //提示
							title: res.msg,
							icon: "none",
						})
						setTimeout(function() {
							uni.redirectTo({
								url: '/pages/login/index'
							})
						}, 1000)
					}
				});
			},
			API_uesr() {
				this.ran.request('index/Index/user', {}).then(res => {
					if (res.code == 0) {
						this.uesrData = res.data;
					}
				});
			},
			API_Logo() {
				var that = this;
				that.ran
					.request('index/Index/indexSet', {})
					.then(res => {
						if (res.code == 0) {
							that.indexSet = res.data;
						}
					});
			},
		}
	};
</script>

<style lang="scss">
	page {
		// background: url(/static/mytopbg.png) no-repeat top center;
		background-size: 100%;
		background-color: #f8f8f8;
	}

	.topNameBox {
		width: 710rpx;
		padding: 10rpx 20rpx;
		overflow: hidden;
		margin-bottom: 40rpx;

		.img_logo {
			width: 100rpx;
			float: left;
			border-radius: 100rpx;
		}

		.name {
			padding: 0 20rpx;
			float: left;

			.n1 {
				line-height: 60rpx;
				font-size: 28rpx;
			}

			.n2 {
				line-height: 40rpx;
				color: #666;
				font-size: 26rpx;
				overflow: hidden;

				.edit {
					width: 30rpx;
					margin-top: 5rpx;
					float: right;
					margin-left: 20rpx;
				}
			}
		}
	}

	.linesBox {
		width: 670rpx;
		margin: 0 20rpx;
		padding: 0 20rpx;
		border-radius: 20rpx;
		background: #fff;

		.lineborder {
			border-bottom: 1px solid #ededed;
		}

		.lines {
			overflow: hidden;
			padding: 5rpx 0;

			.more {
				width: 16rpx;
				float: right;
				margin-top: 30rpx;
			}

			.rtxt {
				float: right;
			}

			view {
				float: left;
				padding: 0 20rpx;
				line-height: 80rpx;
				font-size: 28rpx;
			}

			.icon {
				width: 30rpx;
				float: left;
				margin-top: 25rpx;
			}
		}
	}

	.orderBox {
		overflow: hidden;
		width: 690upx;
		margin: 30upx auto;
		padding: 10rpx 0 0;
		border-radius: 20upx;
		background: #fff;

		.iconBox {
			display: flex;
			padding: 10upx 0;
			overflow: hidden;

			.icon {
				flex: 1;
				float: left;

				.name {
					text-align: center;
					font-size: 24upx;
					line-height: 60upx;
				}

				image {
					width: 50upx;
					height: 50upx;
					display: block;
					margin: auto;
				}
			}
		}
	}

	.topMoneyBox2 {
		width: 670rpx;
		margin: 0 20rpx 40rpx;
		padding: 40rpx 20rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tmbBtn {
			float: right;
			padding: 0 20rpx;
			line-height: 50rpx;
			font-size: 22rpx;
			border-radius: 60rpx;
			color: #fff;
			background: linear-gradient(#00e6ff, #00c8e2);
		}

		.tmbleft2 {
			view:nth-child(1) {
				font-size: 24rpx;
				line-height: 40rpx;
				opacity: 0.7;
			}

			view:nth-child(2) {
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>